<template>
  <div class="classify">
    <div class="title">
      <b v-for="(v, i) in tabs" :key="v.id"
        :class="i === activeIndex ? 'active': ''"
        @click="activeIndex = i"
      >{{ v.title }}</b>
    </div>
    <div class="context">
      <!-- 列表渲染 -->
      <List :list="tabs[activeIndex].children" v-if="tabs.length"/>
    </div>
  </div>
</template>


<script>
import  axios from 'axios'
import List from '@/components/List'
export default {
  name: 'Classify',
  created() {
    // 请求数据
    axios.get('/tabs').then(resp => {
      console.log(resp.data.data);
      this.tabs = resp.data.data
    })
  },
  data() {
    return {
      tabs: [],  //大数据
      activeIndex: 0  //高亮下标
    }
  },
  components: {
    List
  }
}
</script>

<style scoped lang="scss">
.classify {
  display: flex;
  height: 100%;
  .title{
    width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid #ccc;
    height: 100%;
    b {
      padding: 12px 0;
      &.active {
        color: red;
      }
    }
  }
  .context{
    flex: 1;
  }
}
</style>